<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>排行榜页面</title>
		<script src="../../js/vue.js"></script>
		<script src="../../js/element.js"></script>
		<script src="../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/top/top.css" />
	</head>
	<body>
		<div id="app">
			<!-- 头部top信息 -->
			<div class="header">
				<!-- top图片 -->
				<span class="img">
					<img :src="songList[0].songImg">
				</span>
				<span class="topInfo">
					<!-- top名称 -->
					<div class="topName">
						<h1>{{top.name}}</h1>
					</div>
					<!-- 介绍 -->
					<div class="remarks">
						<span>
							<span>{{top.remarks}}</span>
						</span>
					</div>
					<!-- 歌单相关操作 -->
					<div class="topButtons">
						<!-- 播放全部 -->
						<span class="button" @click="listPlayButton()">
							<i class="songListPlay iconfont icon-24gl-play"></i>
							播放全部
						</span>
						<!-- 其他 -->
						<span class="otherButton">
							<i class="iconfont icon-gengduo"></i>
						</span>
					</div>
				</span>
			</div>
			<div class="main">
				<div class="main-header">
					<span class="nav1">歌曲</span>
					<span id="hr"></span>
				</div>
				<div class="iframDiv">
					<iframe id="albumIframe" :src="navUrl" frameborder="0">

					</iframe>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					url: '', //本页面的 url
					topList: [
						{
							id: 0,
							name: '飙升榜',
							img: '', // 排行榜第一的歌曲图片
							remarks: '每天更新'
						},
						{
							id: 1,
							name: '热歌榜',
							img: '', // 排行榜第一的歌曲图片
							remarks: '每周更新'
						},
						{
							id: 2,
							name: '新歌榜',
							img: '', // 排行榜第一的歌曲图片
							remarks: '每周更新'
						}
					],
					top: '', //当前页面是什么榜
					songList: '', //歌曲列表，
					// 菜单
					navUrl: 'song.html', //菜单指向的地址
					currentIndex: -1,
					headers: {
						"token": this.getCookie('yxy-pre:user_token')
					},
				}
			},
			mounted() { // 生命周期函数
				this.getSheetById()
				window.getChildrenSongCurrentIndex = this.getChildrenSongCurrentIndex
				window.listPlayButton = this.listPlayButton
				window.getIndexCurrentIndex = this.getIndexCurrentIndex
				window.toSinger = this.toSinger
				window.toAlbum = this.toAlbum
				window.getSheetById = this.getSheetById
			},
			methods: {
				getChildrenSongCurrentIndex(currentIndex) {
					this.currentIndex = currentIndex
				},
				// 获取当前页面的 url 中的 sheetId
				getUrlId() {
					// 1、获取当前页面的 url
					var url = window.location.href
					this.url = url
					console.log(url)
					// 2、字符串截取 获取 sheetId
					var sheetId = url.slice(url.indexOf('=') + 1)
					console.log('歌单id', sheetId)
					// 3、返回 sheetId
					return '' + sheetId
				},
				// 根据 Id 查找 top 信息
				getSheetById() {
					// 1、获取 albumId
					// console.log(this.getUrlAlbumId())
					var id = this.getUrlId()
					for (let i = 0; i < this.topList.length; i++) {
						if(this.topList[i].id == id){
							this.top = this.topList[i]
						}
					}
					console.log(this.top)
					if(this.top.id==0){
						axios({
							method: 'get',
							url: 'http://localhost:8160/top/soarList/',
							headers: {
								'token': this.getCookie('yxy-pre:user_token')
							}
						}).then(res => {
							//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
							if (res.data != undefined && res.data.code == 200) {
								console.log(res.data)
								this.songList = res.data.data.songList
								window.songList = this.songList
							} else { //登陆失败
								this.$message.error(res.data.message)
							}
						})
					} else if(this.top.id==1){
						axios({
							method: 'get',
							url: 'http://localhost:8160/top/hotList/',
							headers: {
								'token': this.getCookie('yxy-pre:user_token')
							}
						}).then(res => {
							//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
							if (res.data != undefined && res.data.code == 200) {
								console.log(res.data)
								this.songList = res.data.data.songList
								window.songList = this.songList
							} else { //登陆失败
								this.$message.error(res.data.message)
							}
						})
					} else if(this.top.id==2){
						axios({
							method: 'get',
							url: 'http://localhost:8160/top/newList',
							headers: {
								'token': this.getCookie('yxy-pre:user_token')
							}
						}).then(res => {
							//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
							if (res.data != undefined && res.data.code == 200) {
								console.log(res.data)
								this.songList = res.data.data.songList
								window.songList = this.songList
							} else { //登陆失败
								this.$message.error(res.data.message)
							}
						})
					} 
				},
				// 播放全部
				listPlayButton(currentIndex) {
					console.log('album歌曲下标' + currentIndex)
					this.getSheetById()
					// console.log(this.album.songList)
					// 1、将专辑的歌曲列表数据通过父页面方法传给父页面
					// 获取正在播放歌曲的下标，-1 表示还没有播放
					window.parent.getChildrenSongList(this.songList, currentIndex)
				},
				// 获取父页面正在播放的下标
				getIndexCurrentIndex(currentIndex) {
					// 调用子页面方法将，正在播放歌曲下标传给子页面
					var iframeDocument = document.getElementById("albumIframe")
					iframeDocument.contentWindow.getAlbumCurrentIndex(currentIndex)
				},
				// 通过值获取cookie
				getCookie(key) {
					// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
					// 根据 ；将 cookie 字符串分割成数组 
					var cookieArr = document.cookie.split("; ");
					// 遍历数组
					for (var i = 0; i < cookieArr.length; i++) {
						// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
						var cookiePair = cookieArr[i].split("=");
						if (key == cookiePair[0]) {
							return decodeURIComponent(cookiePair[1]);
						}
					}
					return null;
				},
				// 跳转到歌手页面
				toSinger(id) {
					console.log(id)
					const fatherHtml = window.parent.document.querySelector("#indexIframe")
					fatherHtml.setAttribute('src', 'singer/singer.html?singerId=' + id)
				},
				// 跳转到歌手页面
				toAlbum(id) {
					console.log(id)
					const fatherHtml = window.parent.document.querySelector("#indexIframe")
					fatherHtml.setAttribute('src', 'album/album.html?albumId=' + id)
				},
				// 是否我喜欢
				changeLove(flag, id) {
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/changeLove/3/' + flag + '/' + id,
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.getSheetById()
						} else {
							this.$message.error(res.data.message)
						}
					})
				},
				// 跳转到我的音乐页面
				toMySong(){
					const topHtml =  window.top.document.querySelector("#indexIframe")
					topHtml.setAttribute('src', 'menus/mySong/mySong.html')
				},
				
			},
		})
	</script>
</html>